<template>
  <div class="dark">
    <el-button
      type="primary"
      :icon="icoFlag?Sunny:Moon"
      @click="DKmode"
      :round="true"
    ></el-button>
  </div>
</template>
   
<script setup lang='js'>
import {ref} from "vue"
import { Sunny, Moon } from "@element-plus/icons-vue";
import {userDataStore} from "@/store/useUserDataStore.js"
let flag = userDataStore()
const icoFlag = ref(flag.lightMode)
function DKmode(){
    if(flag.lightMode){
        icoFlag.value=false
        flag.lightMode=false
        document.body.classList.remove("light")
        document.body.classList.add("dark")
    }else{
        icoFlag.value=true
        flag.lightMode=true
        document.body.classList.remove("dark")
        document.body.classList.add("light")
    }
}
// DKmode()
</script>
   
<style scoped>
.dark {
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>